<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="admin/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="admin/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form class="layui-form layuimini-form" id="up_form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label required">社区名称</label>
        <div class="layui-input-block">
            <input type="text" name="communityName" id="communityName" lay-verify="required" lay-reqtext="社区名称不能为空" placeholder="请输入社区名称" value="" class="layui-input">
        </div>
    </div>

    <!--************这里是上传图片的代码***************-->
    <!--************这里添加的隐藏的输入框，用来传递images的参数***************-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图片上传:</label>
        <div class="layui-input-block">
            <div class="layui-upload">
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;padding:10px 0 10px 0; ">
                    <div class="layui-upload-list" id="img_upload"></div>
                </blockquote>
                <button type="button" class="layui-btn"  style="background-color:#4383d3" id="img_upload_btn">添加图片</button>
                <span id="tipSelectFile" style="color: red"></span>
            </div>
            <button id="hideUpload" type="button" style="display: none"></button>
        </div>
    </div>
    <!--************上面里是上传图片的代码***************-->

    <div class="layui-form-item">
        <label class="layui-form-label required">社区成员数</label>
        <div class="layui-input-block">
            <input type="text" name="communityMember" id="communityMember" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">社区简介</label>
        <div class="layui-input-block">
            <input type="text" name="communitySynopsis" id="communitySynopsis" lay-verify="required" lay-reqtext="社区简介不能为空" placeholder="请输入社区简介" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">社区创建时间</label>
        <div class="layui-input-block">
            <input type="text" name="communityCreationTime" id="communityCreationTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">社区贴子数</label>
        <div class="layui-input-block">
            <input type="text" name="communityPostNumber" id="communityPostNumber" placeholder="请输入社区贴子数" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">社区点赞量</label>
        <div class="layui-input-block">
            <input type="text" name="communityLikeNumber" id="communityLikeNumber" placeholder="请输入社区点赞量" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">社区点击量</label>
        <div class="layui-input-block">
            <input type="text" name="communityClickNumber" id="communityClickNumber" placeholder="请输入社区点击量" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">社区收藏量</label>
        <div class="layui-input-block">
            <input type="text" name="communityCollectionNumber" id="communityCollectionNumber" placeholder="请输入社区收藏量" value="" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>
<script src="admin/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate,
            upload = layui.upload;
            $ = layui.$;
        //日期
        laydate.render({
            elem: '#communityCreationTime'
            ,type: 'datetime'
        });


      /*  //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });

            return false;
        });*/
        //监听提交
        form.on('submit(formDemo)', function(data){
         ////   var date = new Date();

            subData = {
                communityName:data.field.communityName.toString(),
                communityMember:data.field.communityMember.toString(),
                communitySynopsis:data.field.communitySynopsis.toString(),
                communityCreationTime:data.field.communityCreationTime,
                communityPostNumber:data.field.communityPostNumber.toString(),
                communityLikeNumber:data.field.communityLikeNumber.toString(),
                communityClickNumber:data.field.communityClickNumber.toString(),
                communityCollectionNumber:data.field.communityCollectionNumber.toString()
            }
            $.ajax({
                type:'post',
                url:'communityInformation/upload',
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", window.sessionStorage.getItem("token"));
                },
                data:subData,
                success:(res)=>{
                    if(res.msg === 'filed'){
                        $('#tipSelectFile').text("请选择社区图片")
                    }
                },
                error:(err)=>{

                }
            });
            $('#hideUpload').click();
            return false;
        });

        //多图片上传
        upload.render({
            elem: '#img_upload_btn'         //绑定点击按钮
            ,url: 'communityInformation/upload'     //访问后台路径
            ,headers: {
                token: window.sessionStorage.getItem("token")
            }
            ,multiple: true                 //确认上传多张图片
            ,accept: 'images'               //图片格式
            ,number: 6                      //最大上传图片数量
            ,auto:false                     //取消自动上传
            ,method: 'post'                 //请求上传的 http 类型
            ,bindAction:'#hideUpload'       //绑定真正的上传按钮
            ,data:{                         //访问后台提交的数据
                communityMember:()=>{
                    return $('#communityMember').val();//官方文档说明：实现动态传值
                },
                communityName:()=>{
                    return subData.communityName;
                },communitySynopsis:()=>{
                    return subData.communitySynopsis;
                },communityCreationTime:()=>{
                    return subData.communityCreationTime;
                },communityPostNumber:()=>{
                    return subData.communityPostNumber;
                },communityLikeNumber:()=>{
                    return subData.communityLikeNumber;
                },communityClickNumber:()=>{
                    return subData.communityClickNumber;
                },communityCollectionNumber:()=>{
                    return subData.communityCollectionNumber;
                }
            }
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#img_upload').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">');
                    $('#tipSelectFile').text("")
                });
            }
            ,before: function (obj) {
                    // 1、动态添加headers中的参数
                    this.headers.token= window.sessionStorage.getItem('token')
            }
            ,done: function(res){
                if(res.msg === 'success'){
                    alert('添加成功')
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.location.href = 'toCommunityInfoIndex';
                }else {
                    alert('添加失败')
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.location.href = 'toCommunityInfoIndex';
                }
                
            }
        });

    });
</script>
</body>
</html>